<template>
  <div class="searchpage flex flex-col">
    <div class="bg-white pt-8px pb-12px">
      <search
        ref="search"
        placeholder="商机名称快速搜索"
        class="search"
        :valuemodel="value"
        :close="true"
        @onSearch="onSearch"
      ></search>
    </div>
    <div
      class="flex justify-center items-center flex-col mb-12px h-full businesslist"
    >
      <p
        class="mt-12px text0 mb-0px pl-10px text-left"
        style="width: 100%"
        v-show="list.length != 0"
        v-if="list.length > 0"
      >
        搜索到{{ total }}条商机
      </p>
      <div class="flex-1 overflow-auto w-full mb-50px">
        <PullRefresh v-model="refreshing" @refresh="onRefresh">
          <List
            v-model="loading"
            :finished="finished"
            :finished-text="list.length ? '没有更多了' : ''"
            @load="onLoad"
            :immediate-check="false"
          >
            <cardList
              :list="list"
              :active="active"
              @update="onRefresh"
              @updatafalling="get_falling_num"
              @Details="details"
              :loading="loading"
              v-if="list.length > 0"
            ></cardList>
            <div
              v-if="list.length === 0 && !loading"
              class="flex justify-center items-center flex-col flex-1 pt-174px pb-228px"
            >
              <VanImage
                :src="require('@/assets/business/icon_phb_wssd.png')"
                class="VanImage"
              ></VanImage>
              <span class="mt-16px text">未搜索到商机</span>
            </div>
          </List>
        </PullRefresh>
      </div>
    </div>
  </div>
</template>

<script>
import search from "../components/search.vue";
import { Image as VanImage, PullRefresh, List, Toast } from "vant";
import cardList from "../components/cardList.vue";
import { fetchBusiness } from "@/services/common.js";
export default {
  components: {
    search,
    VanImage,
    PullRefresh,
    List,
    cardList,
  },
  data() {
    return {
      list: [],
      value: "",
      pageNum: 1,
      refreshing: false,
      loading: false,
      finished: false,
      total: 0,
      active: "",
    };
  },
  activated() { 
    localStorage.setItem("upateNum", false);
    this.gosearch();
  },
  methods: {
    onSearch(val) {
      this.value = val;
      this.onRefresh();
    },
    gosearch() {
      if (this.$route.query) {
        this.value = this.$route.query.value;
        this.active = this.$route.query.active;
        this.$refs.search.setValue(this.value);
        this.onRefresh(); 
      }
    },
    // 获取列表
    async get_search() {
      if (this.value) { 
        try { 
          let belongLib;
          switch (this.active) {
            case "HighSeas":
              belongLib = 2;
              break;
            case "SilentLibrary":
              belongLib = 1;
              break;
            case "TemporaryLibrary":
              belongLib = 3;
              break;
            case "PrivateSea":
              belongLib = 4;
              break;
            case "OuterZone":
              belongLib = 5;
              break;
          }
          const data = await fetchBusiness({
            pageNum: this.pageNum,
            searchKey: this.value,
            belongLib: belongLib,
          });
          console.log("7777");
          if (this.refreshing) {
            this.list = data.data;
            this.total = data.total;
          } else {
            this.list = this.list.concat(data.data);
          }
          if (data.data.length < data.pageSize) {
            this.finished = true;
            console.log("999");
          } else {
            this.finished = false;
          }
          this.refreshing = false;
          this.loading = false;
        } catch (err) {
          Toast(err.errMessage || err.message);
          this.loading = false;
        }
      }
    },
    // 进入详情
    details(val) {
      this.$router.push({ name: this.active, query: { id: val.id } });
    },
    onRefresh() {
      console.log("onRefresh");
      this.refreshing = true;
      // 清空列表数据
      this.finished = false;
      this.loading = true;
      // 将 loading 设置为 true，表示处于加载状态
      this.pageNum = 1;
      this.onLoad();
    },
    onLoad() {
      console.log("onLoad");
      if (!this.refreshing) {
        this.pageNum++;
      }
      setTimeout(() => { 
        this.get_search();
      }, 300);
    },
    get_falling_num() { 
      localStorage.setItem("upateNum", true);
    },
  },
};
</script>

<style lang="scss" scoped>
.searchpage {
  width: 100%;
  font-family: PingFangSC-Regular, PingFang SC;
  .text0 {
    font-size: 14px;
    color: #666666;
  }
  .text {
    font-size: 16px;
    color: #333333;
  }
  // .businesslist {
  //   height: calc(100vh - env(safe-area-inset-bottom));
  // }
}
.VanImage {
  width: 40px;
  height: 40px;
}
</style>
